<template>
  <div>
    <div>
      <FormPanel ref="formPanel" :list="formList" :cols="2" :labelWidth="150" :formType="type" :isSubmitBtn="false" @formChange="formChangeHandle" />
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <BaseDialog title="FD单号选择" :visible.sync="showChooseFD" width="35%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
        <ChooseFdInfo :vinData="vinData" @reqFD="reqFDRO" @cancleFd="closeFdDia"></ChooseFdInfo>
      </BaseDialog>
      <AjaxButton v-if="optTypes != 'detail'" :click="saveDrawer" type="primary">确&nbsp;&nbsp;定</AjaxButton>
      <el-button @click="closeDrawer">关&nbsp;&nbsp;闭</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { saveComplaint, getCompalaintById } from '@/api/customerRepair/customerComplaint/customerComplaintMng';
import { IDNumber, phone, numberCheck, email } from '@/utils/validate';
import moment from 'moment';
import ChooseFdInfo from '../components/ChooseFdInfo';
export default {
  components: {
    ChooseFdInfo
  },
  mixins: [dictionary],
  props: {
    excuteComplaintId: Number,
    excuteComplaintNo: String,
    excuteComplaintVin: String,
    optTypes: String
  },
  data() {
    this.saveData = {};
    return {
      vinData: {},

      formList: this.createFormList(),
      flag: false,
      type: null,
      showChooseFD: false,
      customerComplaint: {
        complaintId: ''
      }
    };
  },
  created() {},
  mounted() {
    this.getCompalaintExcute();
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '投诉单编号',
          fieldName: 'complaintNo',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '底盘号',
          fieldName: 'vin',
          disabled: true
        },
        {
          type: 'DATE_TIME',
          label: '处理时间',
          fieldName: 'excuteTime',
          disabled: this.optTypes == 'detail',
          rules: [{ required: !(this.optTypes == 'detail'), message: '请填写处理时间', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '方案执行人',
          fieldName: 'excuteUser',
          disabled: this.optTypes == 'detail'
        },
        {
          type: 'SELECT',
          label: '方案类型',
          fieldName: 'plantype',
          itemList: [
            { text: '索赔', value: 'A' },
            { text: '优惠索赔', value: 'B' },
            { text: '善意补偿', value: 'C' },
            { text: '特殊安抚', value: 'D' },
            { text: '常规维修或保养', value: 'E' },
            { text: '其他', value: 'F' }
          ],
          rules: [{ required: !(this.optTypes == 'detail'), message: '请选择方案类型', trigger: 'change' }],
          disabled: this.optTypes == 'detail'
        },
        {
          type: 'SELECT',
          label: '实施类型',
          fieldName: 'actiontype',
          itemList: [
            { text: '退车', value: 'A' },
            { text: '换车', value: 'B' },
            { text: '更换总成', value: 'C' },
            { text: '更换零部件', value: 'D' },
            { text: '其他', value: 'E' }
          ],
          rules: [{ required: !(this.optTypes == 'detail'), message: '请选择实施类型', trigger: 'change' }],
          disabled: this.optTypes == 'detail'
        },
        {
          type: 'INPUT',
          label: '客户承担费用',
          fieldName: 'userfee',
          disabled: this.optTypes == 'detail',
          rules: [{ pattern: /^\d{1,}$/, message: '请输入整数' }]
        },
        {
          type: 'INPUT',
          label: 'FD单号',
          fieldName: 'diss1',
          disabled: this.optTypes == 'detail',
          readonly: false,
          style: { width: '200px' },
          unitRender: props => {
            return (
              <div>
                <i slot="suffix" style="line-height: 30px" class="el-input__icon el-icon-circle-plus" onClick={() => this.openChooseFD()}></i>
                <i slot="suffix" style="line-height: 30px" class="el-input__icon el-icon-error" onClick={() => this.delFD()}></i>
              </div>
            );
          },
          disabled: this.optTypes == 'detail'
        },
        {
          type: 'INPUT',
          label: '经销商承担费用',
          fieldName: 'dealerfee',
          disabled: this.optTypes == 'detail',
          rules: [{ pattern: /^\d{1,}$/, message: '请输入整数' }]
        },
        {
          type: 'INPUT',
          label: 'FD用户码',
          fieldName: 'diss2',
          disabled: this.optTypes == 'detail'
        },
        {
          type: 'INPUT',
          label: '备件代码1',
          fieldName: 'partcode',
          disabled: this.optTypes == 'detail'
        },
        {
          type: 'INPUT',
          label: 'FD维修码',
          fieldName: 'diss3',
          disabled: this.optTypes == 'detail'
        },
        {
          type: 'INPUT',
          label: '备件代码2',
          fieldName: 'partcodeb',
          disabled: this.optTypes == 'detail'
        },
        {
          type: 'SELECT',
          label: '是否实施完毕',
          fieldName: 'completedFlag',
          itemList: this.createDictList('1004'),
          rules: [{ required: !(this.optTypes == 'detail'), message: '请选择是否实施完毕', trigger: 'change' }],
          disabled: this.optTypes == 'detail'
        },
        {
          type: 'TEXT_AREA',
          label: '方案实施结果',
          fieldName: 'dealResTxt',
          selfCols: 2,
          maxlength: 500,
          disabled: this.optTypes == 'detail'
        }
      ];
    },
    formChangeHandle(val) {
      this.flag = true;
      this.saveData = val;
    },
    async getCompalaintExcute() {
      if (this.excuteComplaintId) {
        const res = await getCompalaintById(this.excuteComplaintId);
        if (res.resultCode != 200) {
          this.$message.error('查询客户投诉详情失败');
          return;
        }
        this.customerComplaint = res.data;
        this.formList.forEach(x => {
          x.initialValue = this.customerComplaint[x.fieldName];
        });
      } else {
        this.formList.find(item => item.fieldName === 'vin').initialValue = this.excuteComplaintVin;
        this.formList.find(item => item.fieldName === 'complaintNo').initialValue = this.excuteComplaintNo;
      }
      this.formList = [...this.formList];
    },
    closeDrawer() {
      this.$emit('cancle', this.flag);
    },
    async saveDrawer() {
      // this.$refs.formPanel.SUBMIT_FORM();
      const [err, data] = await this.$refs.formPanel.GET_FORM_DATA();
      if (err) {
        return this.$message.warning('请按规则填写数据');
      } else {
        this.formChangeHandle(data);
        if (this.flag) {
          this.$emit('reqExcute', this.saveData);
        }
      }
    },
    // 打开选择工单弹框
    openChooseFD() {
      this.vinData = {
        vin: this.formList.find(item => item.fieldName === 'vin').initialValue
      };
      this.showChooseFD = true;
    },
    // 选择工单
    reqFDRO(chooseRepairOrder) {
      this.formList.find(item => item.fieldName === 'diss1').initialValue = chooseRepairOrder.VBELNM; // 投诉人
      this.showChooseFD = false;
    },
    // 删除工单
    delRepairOrder() {
      this.$refs.formPanel1.RESET_FORM();
    },
    closeFdDia() {
      this.showChooseFD = false;
    }
  }
};
</script>
